import React from 'react';
import { Card, Form, Input, Button, Switch, Space } from 'antd';

const UserSettings = () => {
    const [form] = Form.useForm();

    const onFinish = (values) => {
        console.log('Success:', values);
    };

    return (
        <Card title="用户设置">
            <Form
                form={form}
                layout="vertical"
                onFinish={onFinish}
                initialValues={{ notifications: true }}
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[
                        { required: true, message: '请输入邮箱!' },
                        { type: 'email', message: '请输入有效的邮箱地址!' }
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item label="接收通知" name="notifications" valuePropName="checked">
                    <Switch />
                </Form.Item>

                <Form.Item>
                    <Space>
                        <Button type="primary" htmlType="submit">
                            保存设置
                        </Button>
                        <Button htmlType="button">
                            重置
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </Card>
    );
};

export default UserSettings;
